<template>
    <div>
        <!-- <h4>职级管理</h4> -->
        <!-- 一键清空input输入框： clearable -->
        <!-- 内容超过行则……：show-overflow-tooltip -->
        <form class="Topfrom">
            <label class="labelYs">职级编码</label>
            <el-input v-model="rankNo" clearable class="TopInput" placeholder="请输入职级编码" />
            <label class="labelYs">职级层次</label>
            <el-input v-model="rankArrangement" clearable class="TopInput" placeholder="请输入职级层次" />
            <label class="labelYs">职级层次名称</label>
            <el-input v-model="rankArrangementName" clearable class="TopInput" placeholder="请输入职级层次名称" />
            <label class="labelYs">薪资范围</label>
            <el-input v-model="salaryMinimum" clearable class="MonmyInput" placeholder="请输入下限" />
            &nbsp;&nbsp;~
            <el-input v-model="salaryCap" clearable class="MonmyInput" placeholder="请输入上限" />
            <el-button :icon="Search" type="primary" class="SearchButton" @click="loadData">搜素</el-button>
        </form>
        <div class="TopbuttonDiv">
             <el-button type="primary" class="Topbutton" plain v-perm:hris:hris_master_data:pm:insert="insert">
            <el-icon><Plus /></el-icon>
            新增</el-button>
        <el-button type="success" class="Topbutton" plain>
            <el-icon><EditPen /></el-icon>
            修改</el-button>
        <el-button type="danger" class="Topbutton" plain>
            <el-icon><Delete /></el-icon>
            删除</el-button>
        </div>

        <el-table :data="page.records" border stripe>
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column type="index" width="50" /> -->
            <el-table-column label="职级编码" prop="rankNo" align="center" >
            </el-table-column>
            <el-table-column label="职级层次" prop="rankArrangement" align="center" >
            </el-table-column>
            <el-table-column label="职级层次名称" prop="rankArrangementName" show-overflow-tooltip align="center" >
            </el-table-column>
            <el-table-column label="薪资范围（元）" align="center" >
                <el-table-column label="薪资范围下限" prop="salaryMinimum" align="center" >
                </el-table-column>
                <el-table-column label="薪资范围上限" prop="salaryCap" align="center" >
                </el-table-column>
            </el-table-column>
            <el-table-column label="备注" prop="remark" align="center" >
            </el-table-column>
            <el-table-column label="操作" align="center" >
                <template #default="scope">
                    <el-button :row="scope.row" type="primary"
                        v-perm:hris:hris_master_data:pm:update="update">修改</el-button>
                    <el-button :row="scope.row" type="danger"
                        v-perm:hris:hris_master_data:pm:remove="remove">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>

        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="page.current" v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'
import request from '@/api/request'
//搜素按钮图标
import { Search } from '@element-plus/icons-vue'
//input输入框
const rankNo = ref('')
const rankArrangement = ref('')
const rankArrangementName = ref('')
const salaryMinimum = ref('')
const salaryCap = ref('')

let visible = ref(false)
let title = ref("")
let data = ref({})

//分页参数
let page = ref({
    records: [],
    total: 0,
    size: 2,
    current: 1
})

let loadData = () => {

    request({
        url: '/hris/pm/find',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            rankNo: rankNo.value,
            rankArrangement: rankArrangement.value,
            rankArrangementName: rankArrangementName.value,
            salaryMinimum: salaryMinimum.value,
            salaryCap: salaryCap.value
        }
        // ,headers: "Content-Type: application/json"
    }).then(resp => {
        console.log(resp.data)
        page.value = resp.data
    }).then(resp => {
        // if(findRanks.value.salaryCap<findRanks.value.salaryMinimum){
        //     console.error("工资下限不能超过上限");
        // }
    })
}

let handleCurrentChange = (newPage) => {
    page.value.current = newPage
    loadData();
}

let handleSizeChange = (newSize) => {
    page.value.size = newSize
    page.value.current = 1;
    loadData();
}

let insert = (menu) => {
    title.value = menu.menuName
    visible.value = true;
    // console.log(menu)
    router.push(menu.path)
}

let update = (menu, row) => {
    title.value = menu.menuName
    visible.value = true;
    data.value = row
    // console.log(row)
    router.push(menu.path)
}

let remove = (menu, row) => {
    // console.log(row)
    request({
        url: 'hris/pm/delete/' + row.rankNo,
        method: 'delete'
    }).then(resp => {
        loadData();
    })
}
//关闭窗口刷新（立即按钮）
let close = () => {
    visible.value = false;
    loadData();
}

loadData();
</script>

<style scoped>
.demo-pagination-block {
    margin-top: 25px;
    margin-bottom: 16px;
}
/* 表单上方label */
.labelYs {
    font-size: 14px;
    font-weight: 700;
    color: #606266;
}
/* 表单上方输入框 */
.TopInput {
    width: 205px;
    padding:0px 0px 0px 12px;
    margin-top: 18px;
    margin-bottom: 18px;
    margin-right: 12px;
}
.MonmyInput {
    width: 120px;
    padding-left: 12px;
}
.SearchButton {
    margin: 0px 0px 0px 12px;
}
/* 表单上方按钮 */
.Topbutton {
    margin:0px 12px 0px 0px;
}
.TopbuttonDiv {
    margin-bottom: 8px;
}
.Topfrom {
    /* display: inline-block; */
    margin-bottom: 18px;
}
</style>
